<template>
  <view class="my-user-info">
    <view class="top-box">
      <button class="avatar" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
        <image :src="avatarUrl" class="avatar-img"></image>
      </button>
      <input class="nickname" type="nickname" :value="nickname" @blur="bindblur" placeholder="请输入昵称" />
    </view>
    <!-- 内容区域 -->
    <view class=".panel-list">
      <view class="panel">
        <view class="panel-top">
          <view class="panel-item">
            <text>{{ balance.toFixed(2) }}元</text>
            <text>充电余额></text>
          </view>
        </view>
      </view>
      <view class="panel">
        <view class="panel-body">
          <navigator url="/subpkg/chargeOrder/chargeOrder" class="panel-item">
            <image src="./images/order.png" class="icon"></image>
            <text>充电订单</text>
          </navigator>
          <view class="panel-item" @click="developing">
            <image src="./images/service.png" class="icon"></image>
            <text>客服中心</text>
          </view>
        </view>
      </view>
      <view class="panel">
        <view class="panel-body2">
          <view v-for="(item, index) in panelData" :key="index" class="panel-item2" @click="developing">
            <image :src="item.image" class="icon2"></image>
            <text>{{ item.text }}</text>
          </view>
        </view>
      </view>
      <view class="panel" @click="logout">
        <view class="panel-bottom">
          <text>退出登录</text>
          <uni-icons type="right" size="15"></uni-icons>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { requestUserInfo, requestNickname } from '@/utils/api/user.js'
import useUserStore from '@/store/user.js'
import agreement from './images/agreement.png'
import certification from './images/certification.png'
import feat from './images/feat.png'
import message from './images/message.png'
import person from './images/person.png'
import rule from './images/rule.png'
let useStore = useUserStore()
let token = useUserStore().token
//以下两个数组为图表文字展示内容
const panelData = [
  { text: '用户协议', image: agreement },
  { text: '平台资质', image: certification },
  { text: '我要合作', image: feat },
  { text: '消息通知', image: message },
  { text: '个人信息', image: person },
  { text: '规则中心', image: rule }
]
let balance = ref(0)
let nickname = ref('')
let avatarUrl = ref('')
//未开发功能，点击提示正在开发中
let developing = () => {
  uni.$showMsg('开发中...')
}
//退出登录
let logout = () => {
  uni.showModal({
    title: '提示',
    content: '确认退出登录吗',
    success: function (res) {
      if (res.confirm) {
        useStore.userLogout()
      }
    }
  })
}
//组件挂载
onMounted(() => {
  getUserInfo()
})
//获取用户信息
let getUserInfo = async () => {
  let { data: res } = await requestUserInfo()
  if (res.code == 0) {
    balance.value = res.data.balance
    nickname.value = res.data.nickname
    avatarUrl.value = res.data.avatarUrl
  }
}

//更改头像
const onChooseAvatar = async e => {
  const tempFilePath = e.detail.avatarUrl //上传的图片地址
  const maxSizeInBytes = 1024 * 1024 // 限制大小为1MB
  uni.getFileInfo({
    filePath: tempFilePath,
    success: res => {
      const fileSize = res.size
      if (fileSize > maxSizeInBytes) {
        //如果上传的图片大小超过1MB，进行提示
        uni.$showMsg('请上传小于1MB的图片')
        return
      }
      //图片大小符合，替换图片
      avatarUrl.value = tempFilePath
      //将更改的图片上传到服务器
      uni.uploadFile({
        url: "https://charging.lusson.xyz" + '/wx-api/upload/avatar',
        filePath: avatarUrl.value,
        name: 'file',
        header: {
          Authorization: 'Bearer ' + token // 将 token 添加到请求的 header 中
        },
        success(res) {
          let fileRes = JSON.parse(res.data)
          uni.$showMsg(fileRes.message)
        }
      })
    }
  })
}

//获取微信昵称
const bindblur = async e => {
  const newNickname = (nickname.value = e.detail.value)
  //将更改的昵称上传给接口
  let res = await requestNickname({ newNickname })
  uni.$showMsg(res.data.message)
}
</script>

<style lang="scss">
.my-user-info {
  height: 100vh;
  background-color: #f4f4f4;
  .top-box {
    height: 240rpx;
    background-color: #0aa671;
    display: flex;
    flex-direction: column;
    align-items: center;
    .avatar {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50rpx;
      border: 2rpx solid white;
      box-shadow: 0 1rpx 5rpx black;
      padding: 0;
      .avatar-img {
        width: 100%;
        height: 100%;
      }
    }
    .nickname {
      color: white;
      margin-top: 20rpx;
      text-align: center;
      font-size: 30rpx;
      font-weight: bold;
    }
  }
}
.panel-list {
  padding: 0 20rpx;
  position: relative;
  top: -40rpx;

  .panel {
    background-color: white;
    border-radius: 15rpx;
    margin-bottom: 20rpx;
    .panel-top {
      display: flex;
      padding-left: 30rpx;
      .panel-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 25rpx;
        padding: 20rpx 0;
      }
    }
    .panel-body {
      display: flex;
      justify-content: space-around;

      .panel-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        font-size: 25rpx;
        padding: 20rpx 0;

        .icon {
          width: 70rpx;
          height: 70rpx;
        }
      }
    }
    .panel-body2 {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      .panel-item2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 25rpx;
        padding: 20rpx 0;
        flex-basis: calc(25%);
        .icon2 {
          width: 50rpx;
          height: 50rpx;
        }
      }
    }
    .panel-bottom {
      display: flex;
      justify-content: space-between;
      padding: 35rpx;
      font-size: 25rpx;
    }
  }
}
</style>
